import React from "react";
import { Table, Input, Popconfirm, Form, Divider } from "antd";
import styles from "./index.less";

const EditableContext = React.createContext();

class EditableCell extends React.Component {
  renderCell = ({ getFieldDecorator }) => {
    const {
      editing,
      dataIndex,
      title,
      record,
      children,
      ...restProps
    } = this.props;
    return (
      <td {...restProps}>
        {editing ? (
          <Form.Item style={{ margin: 0 }}>
            {getFieldDecorator(dataIndex, {
              rules: [
                {
                  required: true,
                  message: `请输入${title}!`
                }
              ],
              initialValue: record[dataIndex]
            })(<Input />)}
          </Form.Item>
        ) : (
          children
        )}
      </td>
    );
  };

  render() {
    return (
      <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
    );
  }
}

class EditableTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = { editingKey: "" };

    this.columns = [
      {
        title: "参数名称",
        dataIndex: "paramName",
        width: "35%",
        editable: true
      },
      {
        title: "参数描述",
        dataIndex: "paramDescription",
        width: "35%",
        editable: true
      },
      {
        title: "操作",
        dataIndex: "operation",
        render: (_, record) => {
          const { editingKey } = this.state;
          const editable = this.isEditing(record);
          return editable ? (
            <span>
              <EditableContext.Consumer>
                {form => (
                  <a onClick={() => this.save(form, record.paramName)}>保存</a>
                )}
              </EditableContext.Consumer>
              <Divider type="vertical" />
              <Popconfirm
                title="确认取消?"
                onConfirm={() => this.cancel(record.paramName)}
              >
                <a>取消</a>
              </Popconfirm>
            </span>
          ) : (
            <span>
              <a
                disabled={editingKey !== ""}
                onClick={() => this.edit(record.paramName)}
              >
                编辑
              </a>
              <Divider type="vertical" />
              <Popconfirm
                title="确认删除?"
                onConfirm={() => this.del(record.paramName)}
              >
                <a disabled={editingKey !== ""}>删除</a>
              </Popconfirm>
            </span>
          );
        }
      }
    ];
  }

  isEditing = record => record.paramName === this.state.editingKey;

  cancel = () => {
    this.setState({ editingKey: "" });
  };

  save(form, paramName) {
    const { listUpdate } = this.props;
    form.validateFields((error, row) => {
      if (error) {
        return;
      }
      // 编辑表格，更新模板
      listUpdate(row, paramName);
      this.setState({ editingKey: "" });
    });
  }

  edit(paramName) {
    this.setState({ editingKey: paramName });
  }

  del(name) {
    const { listDel } = this.props;
    listDel(name);
    // const tempArr = listOfParams
    //   .map(l => {
    //     if (l.paramName === name) {
    //       if (l.id) {
    //         return { ...l, isDeleted: "Y" };
    //       }
    //       return undefined;
    //     }
    //     return l;
    //   })
    //   .filter(Boolean);
    // setListOfParams(tempArr);
  }

  render() {
    const { listOfParams } = this.props;
    const components = {
      body: {
        cell: EditableCell
      }
    };

    const columns = this.columns.map(col => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          dataIndex: col.dataIndex,
          title: col.title,
          editing: this.isEditing(record)
        })
      };
    });

    return (
      <EditableContext.Provider value={this.props.form}>
        <Table
          rowKey="paramName"
          components={components}
          dataSource={listOfParams.filter(l => l.isDeleted !== "Y")}
          columns={columns}
          rowClassName={styles.editableRow}
          pagination={{
            onChange: this.cancel
          }}
        />
      </EditableContext.Provider>
    );
  }
}

const EditableFormTable = Form.create()(EditableTable);

export default EditableFormTable;
